<template>
    <div>
        <Row class="ivu-mb-8">
            <Col>菜单组名称：</Col>
            <Col><Input /></Col>
        </Row>
        <Row :gutter="24">
            <Col style=" padding-bottom: 40px;" span="6">
            <div class="menu__preview">
                <div class="menu__preview-hd"></div>
                <div class="menu__preview-bd"></div>
                <div class="menu__preview-bottom">
                    <div class="menu__keyboard">
                        <div class="menu__keyboard-icon"></div>
                    </div>
                    <div class="menu__edit-add">
                        <div class="menu__list-wrap " >
                            <ul class="munu_list-ul">
                                <li class="pre_menu_item pre size1of3" v-for="(item,index) in list" :key="index" :class="{'activeCss':activeVar==index}"  @click="clickli(item,index)">
                                    <a class="pre_menu_link menu__menu-link">{{item.name}}</a>
                                    <div class="menu__preview-line"></div>
                                    <div class="pre_menu" v-if="activeVar==index">
                                        <Icon class="ivu-mr-16" type="md-arrow-back" @click.stop="changearrowback(index)" v-if="index!==list.length+1 "/>
                                        <Icon class="ivu-mr-16" type="md-trash" @click.stop="changetrashk(index)"/>
                                        <Icon type="md-arrow-forward" @click.stop="changearrowforward(index)" v-if="index !== list.length-1"/>
                                    </div>
                                    <div class="sub_pre_menu_box menu__sub-menu-box js_l2TitleBox" v-if="activeVar==index">
                                        <ul class="sub__pre-menu-list">
                                            <li class="jslevel2 current" v-for="(it,inx) in item.datacent" :key="inx" :class="{'activeCss':centindex==inx}" @click="changedatacent(it,inx)">
                                                <a  class="jsSubView  sub_pre_menu_inner">
                                                    <span class="js_sub_pre_menu_inner">
                                                        <span class="js_l2Title menu__sub_name">{{it.name}}</span>
                                                    </span>
                                                </a>
                                                <div class="menu-icon" v-if="centindex==inx">
                                                    <Icon type="md-arrow-up"   @click.stop="upData(index,inx)" v-if="inx !==  item.datacent.length - 1 || item.datacent.length ==5"/>
                                                    <Icon type="md-trash" @click.stop="deleteData(index,inx)"/>
                                                    <Icon type="md-arrow-down" @click.stop="downData(index,inx)" v-if="inx !== item.datacent.length -1"/>
                                                </div>
                                            </li>
                                            <li class="js_addMenuBox" @click="changeaddBox(index)" v-if="item.datacent.length<5">
                                                <a title="最多添加5个子菜单" class=" sub_pre_menu_inner jsSubView js_addL2Btn">
                                                    <span class=" js_sub_pre_menu_inner">
                                                    <Icon type="md-add" />添加</span>
                                                </a>
                                            </li>
                                        </ul>
                                        <i class="arrow arrow_out"></i>
                                        <i class="arrow arrow_in"></i>
                                    </div>
                                </li>
                                <li class="pre_menu_item size1of3" @click.stop="changeullink()" v-if="list.length<3">
                                    <a class="pre_menu_link menu__menu-link"> <Icon type="md-add" /></a>
                                    <div class="menu__preview-line"></div>
                                   
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            </Col>
            <Col  span="18">
                <div class="rightbox">
                    
                    <Row type="flex" class="rightcontent">
                        <Col>关于我们</Col>
                        <Col><a  @click="changedeleteMenu()">删除菜单</a></Col>
                    </Row>
                    <!-- <div>
                        <div class="ivu-mt-16 ivu-mb-16">已添加子菜单，仅可设置菜单名称</div>
                        <div>
                            <Form ref="formMenu" :model="formMenu" :rules="ruleMenu" :label-width="100">
                                <FormItem label="菜单名称:" prop="name">
                                    <Input v-model="formMenu.name" placeholder="请输入菜单名称" v-width="400"></Input>
                                    <p>仅支持中英文和数字，字数不超过4个汉字或8个字符</p>
                                </FormItem>
                            </Form>
                        </div>
                    </div> -->
                    <div>
                        <div class="ivu-mt-16">
                            <Form ref="formMenuData" :model="formMenuData" :rules="ruleMenuData" >
                                <FormItem label="菜单名称：" prop="name">
                                    <Input v-model="formMenuData.name" placeholder="请输入名称" v-width="400"></Input>
                                    <p>仅支持中英文和数字，字数不超过4个汉字或8个字符</p>
                                </FormItem>
                                <FormItem label="菜单内容：">
                                    <RadioGroup v-model="formMenuData.menu">
                                        <Radio :label="1">发送消息</Radio>
                                        <Radio :label="2">跳转网页</Radio>
                                        <Radio :label="3">跳转小程序</Radio>
                                    </RadioGroup>
                                </FormItem>
                                <FormItem v-if="formMenuData.menu==1">
                                    <!-- 发送消息开始 -->
                                    <div >
                                        <div class="selectionbox">
                                            <div class="selectionbox-name" @click="changeClass(1)" :class="{activename: isActive === 1}"><span>图文消息</span></div>
                                            <div class="selectionbox-name" @click="changeClass(2)" :class="{activename: isActive === 2}"><span>文字</span></div>
                                            <div class="selectionbox-name" @click="changeClass(3)" :class="{activename: isActive === 3}"><span>图片</span></div>
                                            <div class="selectionbox-name" @click="changeClass(4)" :class="{activename: isActive === 4}"><span>音频</span></div>
                                            <div class="selectionbox-name" @click="changeClass(5)" :class="{activename: isActive === 5}"><span>视频</span></div>
                                            <div class="selectionbox-name" @click="changeClass(6)" :class="{activename: isActive === 6}"><span>视频号动态</span></div>
                                        </div>
                                        <!-- //图文消息 -->
                                        <div style="position: relative;height: 250px;" v-if="isActive===1">
                                            <div class="selectioncent1">
                                                <Row :gutter="24">
                                                <Col class="ivu-mr-16">
                                                    <div @click="changetext()">
                                                    <Icon type="md-folder" style="font-size:20px;" />
                                                    <div>从已发表选择</div>
                                                    </div>
                                                </Col>
                                                <Col class="ivu-ml-16">
                                                <div>
                                                    <Icon type="md-share"  style="font-size:20px;"/>
                                                    <div>转载文章</div>
                                                </div>
                                                </Col>
                                                </Row>
                                            </div>
                                        </div>
                                        <!-- 文字消息 -->
                                        <div style="position: relative;height: 250px;" v-if="isActive===2">
                                            <Input  type="textarea" :autosize="{minRows:10,maxRows: 18}"  placeholder="Enter something..." />    
                                        </div>
                                        <!-- 图片 -->
                                        <div style="position: relative;height: 250px;" v-if="isActive===3">
                                            <div class="selectioncent2" @click.stop="changeimage()">
                                                <Row :gutter="24">
                                                <Col class="ivu-mr-16">
                                                    <div>
                                                    <Icon type="md-folder" style="font-size:20px;" />
                                                    <div>从素材库选择</div>
                                                    </div>
                                                </Col>
                                                <!-- <Col class="ivu-ml-16">
                                                <div>
                                                    <Upload
                                                        multiple
                                                        action="//jsonplaceholder.typicode.com/posts/">
                                                        <div >
                                                            <Icon type="md-image" style="font-size:20px;"/>
                                                            <div>上传图片</div>
                                                        </div>
                                                    </Upload>
                                                   
                                                </div>
                                                </Col> -->
                                                </Row>
                                            </div>
                                        </div>
                                        <!-- 音频 -->
                                        <div style="position: relative;height: 250px;" v-if="isActive===4">
                                            <div class="selectioncent2" @click.stop="changeAudio()">
                                                <Row :gutter="24">
                                                <Col class="ivu-mr-16">
                                                    <div>
                                                    <Icon type="md-folder" style="font-size:20px;" />
                                                    <div>从素材库选择</div>
                                                    </div>
                                                </Col>
                                                <!-- <Col class="ivu-ml-16">
                                                <div>
                                                    <Upload
                                                        multiple
                                                        action="//jsonplaceholder.typicode.com/posts/">
                                                        <div >
                                                            <Icon type="md-volume-up" style="font-size:20px;"/>
                                                            <div>上传音频</div>
                                                        </div>
                                                    </Upload>
                                                   
                                                </div>
                                                </Col> -->
                                                </Row>
                                            </div>
                                        </div>
                                        <!-- 视频 -->
                                        <div style="position: relative;height: 250px;" v-if="isActive===5">
                                            <div class="selectioncent2"  @click.stop="changeVideo()">
                                                <Row :gutter="24">
                                                <Col class="ivu-mr-16">
                                                    <div>
                                                    <Icon type="md-folder" style="font-size:20px;" />
                                                    <div>从素材库选择</div>
                                                    </div>
                                                </Col>
                                                <!-- <Col class="ivu-ml-16">
                                                <div>
                                                    <Upload
                                                        multiple
                                                        action="//jsonplaceholder.typicode.com/posts/">
                                                        <div >
                                                            <Icon type="md-videocam"  style="font-size:20px;"/>
                                                            <div>上传视频</div>
                                                        </div>
                                                    </Upload>
                                                   
                                                </div>
                                                </Col> -->
                                                </Row>
                                            </div>
                                        </div>
                                        <!-- 视频动态号 -->
                                        <div style="position: relative;height: 250px;" v-if="isActive===6">
                                            <div class="selectioncent2" @click.stop="changevideonumber">
                                                <Row :gutter="24">
                                                <Col>
                                                    <div>
                                                    <Icon type="md-add"  style="font-size:20px;"/>
                                                    <div>选择视频号动态</div>
                                                    </div>
                                                </Col>
                                                </Row>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 发送消息结束 -->
                                </FormItem>
                                <FormItem  v-if="formMenuData.menu==2">
                                    <!-- 跳转网页开始 -->
                                    <div>
                                        <div>订阅者点击该子菜单会跳到以下链接</div>
                                         <span class="ivu-mr-16">页面地址：</span><Input v-model="formMenuData.name" placeholder="请输入地址" v-width="400"></Input>
                                         <div style="margin-left: 90px;">
                                            <a class="ivu-mr-16">从已发表选择</a>
                                            <a >从页面模板中选择</a>
                                         </div>
                                    </div>
                                    <!-- 跳转网页结束 -->
                                </FormItem>
                                <FormItem  v-if="formMenuData.menu==3">
                                    <!-- 跳转小程序开始 -->
                                    <div>
                                        <div>订阅者点击该子菜单会跳到以下小程序</div>
                                        <div><span class="ivu-mr-16">小程序：</span><Button>选择小程序</Button></div>
                                         <div class="ivu-mt-16"><span class="ivu-mr-16">备用网页：</span><Input v-model="formMenuData.name" placeholder="请输入地址" v-width="400"></Input></div>
                                         <div style="margin-left: 90px;">
                                            旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页
                                         </div>
                                    </div>
                                    <!-- 跳转小程序结束 -->
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </div>

            </Col>
        </Row>
        <div style="text-align:right;">
            <Button type="primary">保存并发布</Button>
        </div>
        <!-- 模态框 -->
        <Modal v-model="modal" title="选择已有图文" width="1000">
            <Input placeholder="请输入标题搜索" v-width="200"/>
            <div style="padding:30% 45%;">
                暂无数据
            </div>
        </Modal>
        <Modal v-model="modalimg" :title="modalTitle" width="1000">
            <modalCard ref="modalCard" :type="isActive"></modalCard>
        </Modal>
        <!-- 视频号动态 -->
        <Modal v-model="modalvideo" title="选择视频号动态" width="1000">
           <Input placeholder="输入视频号搜索，可选择改账号的视频" suffix="ios-search" v-width="400"/>
            <div class="ivu-mt-16 ivu-mb-16">我的视频号内容</div>
            <div>
                <Scroll :on-reach-bottom="handleReachBottomvideo" :distance-to-edge="[1,1]">
                    <div class="scrollvideobox">
                        <div>
                        <video controls loop class="videocont">
                            <source src="./../../../assets/images/WeChat_20210901093524.mp4" type="video/mp4">
                        </video>
                        <div class="videoname">fdjkfj</div>
                        </div>
                    </div>
                    <div class="scrollvideobox">
                        <div>
                        <video controls loop class="videocont">
                            <source src="./../../../assets/images/WeChat_20210901093524.mp4" type="video/mp4">
                        </video>
                        <div class="videoname">fdjkfj</div>
                        </div>
                    </div>
                    <div class="scrollvideobox">
                        <div>
                        <video controls loop class="videocont">
                            <source src="./../../../assets/images/WeChat_20210901093524.mp4" type="video/mp4">
                        </video>
                        <div class="videoname">fdjkfj</div>
                        </div>
                    </div>
                    <div class="scrollvideobox">
                        <div>
                        <video controls loop class="videocont">
                            <source src="./../../../assets/images/WeChat_20210901093524.mp4" type="video/mp4">
                        </video>
                        <div class="videoname">fdjkfj</div>
                        </div>
                    </div>
                    <div class="scrollvideobox">
                        <div>
                        <video controls loop class="videocont">
                            <source src="./../../../assets/images/WeChat_20210901093524.mp4" type="video/mp4">
                        </video>
                        <div class="videoname">fdjkfj</div>
                        </div>
                    </div>
                    <div class="scrollvideobox">
                        <div>
                        <video controls loop class="videocont">
                            <source src="./../../../assets/images/WeChat_20210901093524.mp4" type="video/mp4">
                        </video>
                        <div class="videoname">fdjkfj</div>
                        </div>
                    </div>
                </Scroll>
            </div>
        </Modal>
    </div>
</template>
<script>
    import modalCard from './modalCard.vue'
    import {wechatdefaultmenuList} from '@api/public'
    export default {
        components:{modalCard},
    data() {
        return {
            wechatId:'',
            activeVar: 0,
            list: [],
            centindex: 0,
            formMenu: {
                name: "",
            },
            ruleMenu: {},
            formMenuData: {
                menu: 1
            },
            ruleMenuData: {},
            //侧边菜单
            isActive: 1,
            modal: false,
            modalimg: false,
            modalTitle:'',
            modalvideo:false,
        };
    },
    methods: {
        initial(wechatId){
            this.wechatId=wechatId
            console.log(wechatId,'wechatId')
            if(wechatId){
                this.getmymu()
            }
           
           
        },
        //获取菜单
        getmymu(){
            wechatdefaultmenuList({wechatId:this.wechatId}).then(res=>{
                console.log(res,'res')
            })
        },
        // 主菜单
        clickli(item, index) {
            console.log(index, "11");
            this.activeVar = index;
        },
        changeullink() {
            this.activeVar++;
            this.list.push({
                name: "菜单名称",
                datacent: []
            });
            console.log(this.list.length - 1, "rr");
            this.activeVar = this.list.length - 1;
        },
        // 子菜单
        changeaddBox(index) {
            this.centindex++;
            this.list[index].datacent.push({
                name: "子菜单名称"
            });
            this.centindex = this.list[index].datacent.length - 1;
        },
        changedatacent(it, inx) {
            this.centindex = inx;
        },
        //主菜单排序
        changearrowback(index) {
            let newArr = this.swapItems(this.list, index, index - 1);
            this.list = newArr;
            this.activeVar = index - 1;
        },
        changearrowforward(index) {
            let newArr = this.swapItems(this.list, index, index + 1);
            this.list = newArr;
            this.activeVar = index + 1;
        },
        changetrashk(index) {
            this.$Modal.confirm({
                title: "提示",
                content: "删除后，菜单名称菜单下设置的内容全部将被删除",
                onOk: () => {
                    // imgdel({ id: item.id }).then(res => {
                    //     this.$Message.info('删除成功');
                    //     this._getimgList()
                    // }).catch(() => {
                    //     // this.$Message.error('删除失败')
                    // })
                    this.activeVar = index;
                },
                onCancel: () => {
                    // this.$Message.error('')
                }
            });
        },
        //上移
        upData(index, inx) {
            let newArr = this.swapItems(this.list[index].datacent, inx, inx - 1);
            this.list[index].datacent = newArr;
            this.centindex = inx - 1;
        },
        swapItems(arr, index1, index2) {
            arr[index1] = arr.splice(index2, 1, arr[index1])[0];
            return arr;
        },
        //下移
        downData(index, inx) {
            let newArr = this.swapItems(this.list[index].datacent, inx, inx + 1);
            this.list[index].datacent = newArr;
            this.centindex = inx + 1;
        },
        //删除
        deleteData(index, inx) {
            this.$Modal.confirm({
                title: "提示",
                content: "删除后，子菜单名称菜单下设置的内容全部将被删除？",
                onOk: () => {
                    // imgdel({ id: item.id }).then(res => {
                    //     this.$Message.info('删除成功');
                    //     this._getimgList()
                    // }).catch(() => {
                    //     // this.$Message.error('删除失败')
                    // })
                },
                onCancel: () => {
                    // this.$Message.error('')
                }
            });
        },
        //侧边菜单
        changeClass(i) {
            this.isActive = i;
        },
        //图文
        changetext() {
            this.modal = true;
        },
        //图片
        changeimage(){
            this.modalTitle='选择图片'
            this.modalimg=true
        },
        changeAudio(){
            this.modalTitle='选择音频'
            this.modalimg=true 
        },
        changeVideo(){
            this.modalTitle='选择视频'
            this.modalimg=true  
        },
        changevideonumber(){
            this.modalvideo=true
        },
        handleReachBottomvideo(){

        },
        //删除菜单
        changedeleteMenu(){
            this.$Modal.confirm({
                title: "提示",
                content: "删除后，历史消息菜单下设置的内容全部将被删除",
                onOk: () => {
                    // imgdel({ id: item.id }).then(res => {
                    //     this.$Message.info('删除成功');
                    //     this._getimgList()
                    // }).catch(() => {
                    //     // this.$Message.error('删除失败')
                    // })
                },
                onCancel: () => {
                    // this.$Message.error('')
                }
            });
        }
    },
}
</script>
<style scoped>
.menu__preview{
    width: 300px;
    height: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    max-height: 634px;
    position: relative;
}
.menu__preview-hd{
    background-image: url(./../../../assets/images/image.png);
    background-size: cover;
    height: 70px;
}
.menu__preview-bd{
    height: 480px;
    position: relative;
    border-radius: 0 0 8px 8px;

}
.menu__preview-bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 8px 8px;
}
.menu__keyboard{
    width: auto;
    height: 100%;
    padding: 0 2px;
}
.menu__keyboard-icon{
    width: 40px;
    height: 100%;
    background: url(./../../../assets/images/sv.svg) 50% no-repeat;

}
.menu__preview .menu__preview-line {
    position: absolute;
    width: 0.5px;
    height: 33px;
    left: 0;
    bottom: 15px;
    right: 0;
}
.line__no-menu{
    left: 44px;
}
.menu__edit-add{
    flex: 1 ;
}

.menu__list-wrap  ul{
    list-style: none;
}
.menu__list-wrap .munu_list-ul{
    /* width: 250px; */

    /* display: inline; */
    display: flex;
    justify-content: center;
    /* position: relative; */
}
.pre{
    position: relative; 
}
.pre_menu_item a{
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    text-decoration: none;
    text-align: center;

}
.pre_menu_item .menu__menu-link{
    padding: 22px 0;
}

.size1of3{
    /* width: 33.33%; */
    width:calc(100% - 50px);
}
.activeCss{
    border: 1.5px solid #07c160;
    background: rgba(7,193,96,.05);
    /* margin: 0 -1px; */
    color: #07c160;
    position: relative;
}
.activeCss .menu__menu-link{
    color: #07c160;
}
/* 子菜单 */
.menu__preview .sub_pre_menu_box{
    bottom: 80px;
    position: absolute;
    left: 0;
    width: 100%;
}
.menu__preview .menu__sub-menu-box {
    border-radius: 4px;
}
.menu__sub-menu-box .jsSubView{
    padding: 10px 0;
}
 .sub_pre_menu_inner {
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    cursor: pointer;
}
.sub_pre_menu_box .arrow_out {
    bottom: -6px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: dashed;
    border-color: transparent;
    border-bottom-width: 0;
    border-top-color: #d0d0d0;
    border-top-style: solid;
}
.sub_pre_menu_box .arrow {
    position: absolute;
    left: 50%;
    margin-left: -6px;
}
.sub_pre_menu_box .arrow_in {
    bottom: -5px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: dashed;
    border-color: transparent;
    border-bottom-width: 0;
    border-top-color: #fafafa;
    border-top-style: solid;
    border-top-color: #fff;
}
.menu__preview .menu__preview-bd .menu__preview-bottom .menu__sub-menu-box .sub__pre-menu-list .current {
    border: 1.5px solid #07c160;
    background: rgba(7,193,96,.05);
    margin: 0 -1px;
}
.pre_menu{
    position: absolute;
    bottom: -31px;
    left: 2px;
    display: flex;
    /* right: 31px; */
    padding: 6px 10px;
    border-radius: 50px;
}
.menu-icon{
    position: absolute;
    top: 0;
    left:calc(100% - -5px);
    /* right: 31px; */
    padding: 6px 7px;
    border-radius: 50px;
}
.menu-icon .ivu-icon{
    font-size: 18px;
}
.rightbox{
    box-sizing: border-box;
    max-height: 550px;
    height: 100%;
    padding:16px
    /* margin-left: 30px; */

}
.rightcontent{
    justify-content: space-between;
    padding: 8px;
}
.selectionbox{
    display: flex;
}
.selectionbox-name{
    text-align: center;
    width: 250px;
    margin:10px;
    padding: 10px;
    cursor: pointer;

}
.activename{
    color: #2D8cF0;
 
}
.selectioncent1{
    position: absolute;
    left: 40%;
    top: 35%;
    text-align: center;
}
.selectioncent2{
    position: absolute;
    left: 45%;
    top: 35%;
    text-align: center;
    cursor: pointer;
}
/* 图片弹框 */
/deep/.ivu-scroll-container{
    height: 440px !important;
    overflow-y: auto;
}
.scrollvideobox{
    width: 200px;
    display: inline-block;
    margin: 10px;
}
.videocont{
    width: 100%;
    height: 250px;
    object-fit: contain;
    border-radius: 10px;
    /* box-shadow: 0 1px 6px #ccc; */
}
.videoname{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
